{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>轮播</li>
  </ol>
<section class="demo-section">
<div id="pageContent">


<article><p>使用方法一：通过data属性可以很容易的控制轮播的定位。 <code>data-slide</code> 可以接受控制播放位置的 <code>prev</code> 或 <code>next</code> 关键字。另外，还可以通过 <code>data-slide-to</code> 传递以 <code>0</code> 开始的幻灯片下标。 <code>data-ride="carousel"</code> 属性用来标记在页面加载之后即开始启动的轮播组件。</p><p>使用方法二：通过js手动启动轮播组件： <code>$('.carousel').carousel()</code></p></article>



<section><header><h3>基本类型</h3></header><article><div class="example no-padding">
  <div id="carouselExample1" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExample1" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExample1" data-slide-to="1" class=""></li>
      <li data-target="#carouselExample1" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img alt="First slide" src="__IMG__/320x320icon.png">
        <div class="carousel-caption">
          <h3>我是第一张幻灯片</h3>
          <p>:)</p>
        </div>
      </div>
      <div class="item">
        <img alt="Second slide" src="__IMG__/320x320icon.png">
        <div class="carousel-caption">
          <h3>我是第二张幻灯片</h3>
          <p>0.0</p>
        </div>
      </div>
      <div class="item">
        <img alt="Third slide" src="__IMG__/320x320icon.png">
        <div class="carousel-caption">
          <h3>我是第三张幻灯片</h3>
          <p>最后一张咯~</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carouselExample1" data-slide="prev">
      <span class="icon icon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carouselExample1" data-slide="next">
      <span class="icon icon-chevron-right"></span>
    </a>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myNiceCarousel"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"carousel slide"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"carousel"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- 圆点指示器 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;ol</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"carousel-indicators"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myNiceCarousel"</span><span class="pln"> </span><span class="atn">data-slide-to</span><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myNiceCarousel"</span><span class="pln"> </span><span class="atn">data-slide-to</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myNiceCarousel"</span><span class="pln"> </span><span class="atn">data-slide-to</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ol&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 轮播项目 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"carousel-inner"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item active"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"First slide"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/slide1.jpg"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"carousel-caption"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;h3&gt;</span><span class="pln">我是第一张幻灯片</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">:)</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Second slide"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/slide2.jpg"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"carousel-caption"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;h3&gt;</span><span class="pln">我是第二张幻灯片</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">0.0</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Third slide"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/slide3.jpg"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"carousel-caption"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;h3&gt;</span><span class="pln">我是第三张幻灯片</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">最后一张咯~</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 项目切换按钮 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"left carousel-control"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#myNiceCarousel"</span><span class="pln"> </span><span class="atn">data-slide</span><span class="pun">=</span><span class="atv">"prev"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-chevron-left"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"right carousel-control"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#myNiceCarousel"</span><span class="pln"> </span><span class="atn">data-slide</span><span class="pun">=</span><span class="atv">"next"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-chevron-right"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>参数</h3></header><article><p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到 <code>data-</code> 之后，例如 <code>data-interval=""</code> 。</p><div class="table-responsive"><table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th style="width: 100px;">名称</th>
      <th style="width: 50px;">类型</th>
      <th style="width: 50px;">默认值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>interval</td>
      <td>number</td>
      <td>5000</td>
      <td>幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。</td>
    </tr>
    <tr>
      <td>pause</td>
      <td>string</td>
      <td>"hover"</td>
      <td>鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。</td>
    </tr>
    <tr>
      <td>wrap</td>
      <td>boolean</td>
      <td>true</td>
      <td>轮播是否持续循环。</td>
    </tr>
  </tbody>
</table></div></article></section>






<section><header><h3>方法和事件</h3></header><article><p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到 <code>data-</code> 之后，例如 <code>data-interval=""</code> 。</p><div class="table-responsive"><table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th style="width: 100px;">方法</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.carousel(options)</code></td>
      <td>初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。</td>
    </tr>
    <tr>
      <td><code>.carousel('cycle')</code></td>
      <td>从左到右循环各帧。</td>
    </tr>
    <tr>
      <td><code>.carousel('pause')</code></td>
      <td>停止轮播。</td>
    </tr>
    <tr>
      <td><code>.carousel(number)</code></td>
      <td>将轮播定位到指定的帧上（帧下标以0开始，类似数组）。</td>
    </tr>
    <tr>
      <td><code>.carousel('pre')</code></td>
      <td>返回上一帧。</td>
    </tr>
    <tr>
      <td><code>.carousel('next')</code></td>
      <td>转到下一帧。</td>
    </tr>
  </tbody>
</table></div><h4>用于监听的事件</h4><div class="table-responsive"><table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th style="width: 150px;">事件类型</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>slide.zui.carousel</td>
      <td>此事件在 <code>slide</code> 方法被调用之后立即出发。</td>
    </tr>
    <tr>
      <td>slid.zui.carousel</td>
      <td>当所有幻灯片播放完之后被触发。</td>
    </tr>
    <tr>
      <td colspan="2"><code>$('#myCarousel').on('slide.zui.carousel', function() {// do something…})</code></td>
    </tr>
  </tbody>
</table></div>
</article></section></div>
</section>
{/block}